<html>
<head>
<title>My catalogue site</title>
<link rel="STYLESHEET" type="text/css" href="/site_media/dhtmlx/dhtmlx.css">
<script  src="/site_media/dhtmlx/dhtmlx.js"></script>
<style>html,body{width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;}

div.sidebar {
    padding: 3px; 
    height:100%;
    width:100%;
    overflow:auto;
    

}
div.sidebar_item{
    font-size:10pt;
    text-align: center;
    padding-top:12pt;
    font-weight:bold
    font-family:Tahoma, sans-serif;
    

}

a{
text-decoration:none;
}


</style>
</head>
<body>


<div id="booksObj" class="sidebar">
<div class="sidebar_item">
<a href="#" onclick="changeMainURL('{% url books_index %}');return false;"><img src="/site_media/led-icons/books.png" width="24" height="24"><br/>
Books</a>
</div>

<div class="sidebar_item">
<a href="#" onclick="changeMainURL('{% url books_search_auto %}');return false;"><img src="/site_media/led-icons/add.png" width="24" height="24"><br/>
Add Auto</a>
</div>

<div class="sidebar_item">
<a href="#" onclick="changeMainURL('{% url books_add %}');return false;"><img src="/site_media/led-icons/add.png" width="24" height="24"><br/>
Add Manual</a>
</div>

</div>



<div id="cdsObj" class="sidebar">
<div class="sidebar_item">
<a href="#" onclick="changeMainURL('/catalogue/cds/');return false;"><img src="/site_media/led-icons/cd.png" width="24" height="24"><br/>
CD's</a>
</div>

<div class="sidebar_item">
<a href="#" onclick="changeMainURL('/catalogue/cds/search_auto/');return false;"><img src="/site_media/led-icons/add.png" width="24" height="24"><br/>
Add Auto</a>
</div>

<div class="sidebar_item">
<a href="#" onclick="changeMainURL('/catalogue/cds/add/');return false;"><img src="/site_media/led-icons/add.png" width="24" height="24"><br/>
Add Manual</a>
</div>

</div>



<script>

function changeBar(id, state) {
    if(!state)
    {
        return;
    }
    
    if(id=="books")
    {
        changeMainURL("/catalogue/books/");
    }
    else if(id=="cds")
    {
        changeMainURL("/catalogue/cds/");
    }
    else if(id=="dvds")
    {
        changeMainURL("/catalogue/dvds/");
    }
}

var dhxLayout=new dhtmlXLayoutObject(document.body,"2U");
    
    

    dhxLayout.cells("a").hideHeader();
    
    dhxLayout.cells("a").setWidth(100);
    dhxAccord = dhxLayout.cells("a").attachAccordion();
    
    
    dhxAccord.addItem("books", "Books");
    dhxAccord.cells("books").setIcon("/site_media/led-icons/book.png");
    dhxAccord.cells("books").attachObject("booksObj");
    
    
    dhxAccord.addItem("cds", "CD's");
    dhxAccord.cells("cds").setIcon("/site_media/led-icons/cd.png");
    dhxAccord.cells("cds").attachObject("cdsObj");

    dhxAccord.addItem("dvds", "DVD's");
    dhxAccord.cells("dvds").setIcon("/site_media/led-icons/dvd.png");
    dhxAccord.openItem("books");
    

    dhxAccord.attachEvent("onActive", changeBar);
    dhxLayout.cells("b").hideHeader();

function changeMainURL(url)
{
    dhxLayout.cells("b").attachURL(url);
}


changeMainURL("/catalogue/books/");
</script>
</body>
</html>